<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/admin/css/other/console1.css"/>
    <link rel="stylesheet" href="/admin/css/other/result.css"/>
    <style>
        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .pear-container {
            margin: 15px;
            width: calc(100vw - 30px);
        }

        body {
            font-family: Source Han Sans SC, Source Han Sans SC;
        }

        .platformOverview-img-font {
            font-size: 16px;
            color: #7A8592;
            line-height: 22px;
            height: 24px;
            position: absolute;
            top: 30px;
            left: 130px;
        }

        .platformOverview-img-number {
            width: 127px;
            height: 45px;
            font-size: 30px;
            color: #000000;
            position: absolute;
            top: 70px;
            left: 130px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .platformOverview .layui-col-md2, .layui-col-xs2 {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }

        .dashedLineStyle {
            width: 100%;
            height: 0px;
            border: 1px dashed #C9CDD6;
        }

        .onlineFonts {
            font-size: 14px;
            color: #4D5867;
            height: 26px;
            margin-left: 10px
        }

        .percentageInfo .icon-yuan {
            width: 16px;
            height: 16px;
            border-radius: 15px;
        }

        .percentageInfo .quantityInfo {
            margin-left: 12px;
            font-size: 16px;
        }

        .percentageInfo .percentage {
            position: absolute;
            right: 0px;
            font-size: 16px;
            color: #C9C9C9;
        }

        .percentageInfo .dashedLine {
            margin-top: 5px;
        }

        .percentageInfo .informationDiv {
            margin-top: 20px;
            display: flex;
        }

        .borrowingRecord {
            height: 50px;
            background: #F8F8F9;
            width: 100%;
            margin: 10px 0px;
        }

        .outbound {
            width: 80px;
            height: 30px;
            background-color: rgb(33, 118, 255, 0.1);
            border-radius: 5px 5px 5px 5px;
            color: #2176FF;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
        }

        .warehousing {
            width: 80px;
            height: 30px;
            background-color: rgba(249, 240, 230, 1);
            border-radius: 5px 5px 5px 5px;
            color: #FC6F17;
            font-size: 16px;
            line-height: 30px;
            text-align: center;

        }

        .operationContent {
            font-size: 16px;
            color: #000000;
            height: 24px;
            text-align: center;
        }

        .operationTime {
            font-size: 16px;
            color: #FC6F17;
            height: 24px;
            text-align: center;
        }

        .cabinetInformation {
            font-size: 16px;
            color: #5B6077;
            margin-top: 10px;
        }
    </style>
</head>
<!--头部-->
<body class="pear-container">
<div class="layui-row platformOverview layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        平台总览
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;margin-right: 12px;">
                    <img src="/img/console/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row layui-col-space5" style="margin-top: 24px;margin-bottom: 12px">
                    <div class="layui-col-sm4 layui-col-md2">
                        <img src="/img/console/档案数量.png" alt="">
                        <div class="platformOverview-img-font">档案总数量</div>
                        <div class="platformOverview-img-number" th:text="${archivesCount}"></div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md2">
                        <img src="/img/console/在库数量.png" alt="">
                        <div class="platformOverview-img-font">在库数量</div>
                        <div class="platformOverview-img-number" th:text="${inTheLibrary}"></div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md2">
                        <img src="/img/console/借阅数量.png" alt="">
                        <div class="platformOverview-img-font">借阅数量</div>
                        <div class="platformOverview-img-number" th:text="${borrowCount}"></div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md2">
                        <img src="/img/console/到期未归还数量.png" alt="">
                        <div class="platformOverview-img-font">所有用户数量</div>
                        <div class="platformOverview-img-number" th:text="${myUserCount}"></div>
                    </div>
                    <div class="layui-col-sm4 layui-col-md2">
                        <img src="/img/console/即将到期数量.png" alt="">
                        <div class="platformOverview-img-font">机柜数量</div>
                        <div class="platformOverview-img-number" th:text="${cabinetCount}"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        库区信息
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/console/网格2.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row" style="height: 400px">
                    <div class="layui-col-sm12 layui-col-md8"
                         style="display: flex;flex-direction: column;align-items: center;">
                        <div id="warehouseAreaInformation" style="width: 100%;height: 400px;"></div>
                    </div>
                    <div class="layui-col-sm12 layui-col-md4 percentageInfo"
                         style="display: flex;flex-direction: column;height: 100%;justify-content: center;">
                        <div class="layui-row">
                            <div class="layui-col-sm12 layui-col-md12">
                                <div class="informationDiv" style="margin-top: 0px;">
                                    <div class="icon-yuan" style="border: 4px solid #00D1D4;"></div>
                                    <div class="quantityInfo">在库数量</div>
                                    <div class="percentage" th:text="${inTheLibraryPercent} +'%'"></div>
                                </div>
                                <div class="dashedLine">
                                    <div class="dashedLineStyle"></div>
                                </div>
                                <div class="informationDiv">
                                    <div class="icon-yuan" style="border: 4px solid #009688;"></div>
                                    <div class="quantityInfo">借阅数量</div>
                                    <div class="percentage" th:text="${borrowCountPercent} +'%'"></div>
                                </div>
                                <div class="dashedLine">
                                    <div class="dashedLineStyle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div class="centered">
                        <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                        <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                            设备状态
                        </div>
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/console/网格2.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row" style="height: 400px">
                    <div class="layui-col-sm12 layui-col-md12"
                         style="display: flex;flex-direction: row;align-items: center;justify-content: center;min-height: 100%;">
                        <div>
                            <img src="/img/console/柜子.jpg" alt="" style="width: 413px;height: 265px">
<!--                            <img src="/img/柜子渲染.png" alt="">-->
                        </div>
                        <div style="margin-left: 8%">
                            <div style="font-size: 30px;line-height: 30px;color: #2B2C36;"
                                 th:text="${host.getNumber()}"></div>
                            <div class="cabinetInformation" th:if="${host.getConnectionStatus() == 1}">状态：
                                <span style="color: #398FFF;">在线</span>
                            </div>
                            <div class="cabinetInformation" th:unless="${host.getConnectionStatus() == 1}">
                                状态：<span style="color: #FC6F17;">离线</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-row layui-col-space15">
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body" style="min-height: 423px">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        档案出入库记录
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/console/网格2.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row"
                     style="margin-top: 17px;margin-left: 12px;min-height: 300px;">
                    <div class="borrowingRecord" th:each="collect,iterStat : ${borrowingList}">
                        <div class="layui-row centered" style="height: 50px;">
                            <div class="layui-col-sm4 layui-col-md4"
                                 style="display: flex;flex-direction: column;align-items: center;">
                                <div class="outbound" th:if="${collect.operationType == 1}">档案出库</div>
                                <div class="warehousing" th:unless="${collect.operationType == 1}">档案入库</div>
                            </div>
                            <div class="layui-col-sm4 layui-col-md4">
                                <div class="operationContent" th:text="${collect.operationContent}"></div>
                            </div>
                            <div class="layui-col-sm4 layui-col-md4">
                                <div class="operationTime" th:text="${collect.create_time}"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-sm12 layui-col-md6">
        <div class="layui-card">
            <div class="layui-card-body" style="min-height: 423px">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        档案出入库记录
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/console/网格2.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row">
                    <div id="borrowingRecordBarChart" style="width: 100%;height: 300px;"></div>
                    <!--                    <div id="borrowingRecordBarChart" style="min-height: 100%"></div>-->
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script th:inline="javascript">
    var StartDate = [[${StartDate}]];
    var endDate = [[${endDate}]];
    var overviewPieDataList = [[${overviewPieDataList}]];
    var archivesCount = [[${archivesCount}]];
    var barChartxName = [[${barChartxName}]];
    var barChartLendingList = [[${barChartLendingList}]];
    var barChartReturnList = [[${barChartReturnList}]];


    layui.use(['popover', 'jquery', 'layer', 'echarts', 'laydate'], function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            var popover = layui.popover;
            let echarts = layui.echarts;
            let laydate = layui.laydate;
            const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
            // 柱状图
            var borrowingRecordBarChart = echarts.init(document.getElementById('borrowingRecordBarChart'), null, {height: 370});
            option = {
                tooltip: {
                    trigger: 'axis',
                    // axisPointer: {
                    //     type: 'shadow'
                    // }
                },
                legend: {
                    data: ['取档', '归档'],
                    textStyle: {
                        color: '#070707',
                        fontSize: 14
                    },
                    left: 'center',
                    top: 30
                },
                grid: {
                    left: '5%',
                    right: '6%',
                    bottom: '3%',
                    top: '25%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: barChartxName,
                    axisLabel: {          //坐标轴字体颜色
                        fontSize: 14,
                        color: '#5B6379'
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#e5e5e5"
                        }
                    },
                    axisTick: {       //y轴刻度线
                        show: false
                    },
                    splitLine: {    //网格
                        show: false,
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {        //坐标轴字体颜色
                        color: '#5B6379',
                        fontSize: 14
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {       //y轴刻度线
                        show: false
                    },
                    splitLine: {    //网格
                        show: true,
                        lineStyle: {
                            color: '#dadde4',
                            type: "dashed" //坐标网线类型
                        }
                    }
                },
                // color: ['#76da91', '#f8cb7f', '#FFB761'],
                series: [
                    {
                        name: '取档',
                        type: 'bar',
                        barWidth: '30%',  //柱子宽度
                        itemStyle: {  //柱子颜色
                            color: '#21CCFF ',
                        },
                        data: barChartLendingList
                    },
                    {
                        name: '归档',
                        type: 'bar',
                        barWidth: '30%',  //柱子宽度
                        itemStyle: {  //柱子颜色
                            color: '#FFB039 ',
                        },
                        data: barChartReturnList,
                    },
                ]
            };
            borrowingRecordBarChart.setOption(option);
            window.onresize = function () {
                borrowingRecordBarChart.resize();
            }

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('warehouseAreaInformation'));
            // 指定图表的配置项和数据
            option = {
                title: {
                    // text: 'Referer of a Website',
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    // formatter: '{a} <br/>{b} : {c} ({d}%)' //自己计算所有数据总数和
                    formatter: function (params) {
                        // 计算当前数据项的百分比
                        var percent = ((params.value / archivesCount) * 100).toFixed(2) + '%';
                        // 返回自定义的提示信息
                        return `${params.seriesName}<br/>${params.name}: ${params.value} (${percent})`;
                    }
                },
                legend: {
                    bottom: 0,
                    orient: 'horizontal',
                    left: 'center',
                },
                series: [
                    {
                        name: '库区饼图',
                        type: 'pie',
                        radius: [35, 160],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        label: {
                            show: false
                        },
                        data: overviewPieDataList,

                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            // window.addEventListener('resize', function () {
            //     myChart.resize();
            // });
            // myChart.resize()


            function maxDate() {
                var now = new Date();
                return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
            }

            //日期范围
            laydate.render({
                elem: '#selectMonth',
                max: maxDate(),
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                range: ['#startDate', '#endDate'],
                theme: '#040F3C',
                done: function (value, date, endDate) {
                    // console.log(value); //得到日期生成的值，如：2017-08-18
                    // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    // console.log(endDate);//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    let selectStartDate = date.year + "-" + date.month + "-" + date.date
                    let selectEndDate = endDate.year + "-" + endDate.month + "-" + endDate.date
                    warehousingTrendChart(selectStartDate, selectEndDate)
                },

            });
            //借阅选择日期范围
            laydate.render({
                elem: '#SelectBorrowMonth',
                max: maxDate(),
                //设置开始日期、日期日期的 input 选择器
                //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
                range: ['#borrowStartDate', '#borrowEndDate'],
                theme: '#040F3C',
                done: function (value, date, endDate) {
                    // console.log(value); //得到日期生成的值，如：2017-08-18
                    // console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    // console.log(endDate);//得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                    let selectStartDate = date.year + "-" + date.month + "-" + date.date
                    let selectEndDate = endDate.year + "-" + endDate.month + "-" + endDate.date
                    borrowingRecordHistogram(selectStartDate, selectEndDate);
                },

            });
            //回转柜子数据详情
            let over = function (number) {
                //trigger:'click', 效果不错trigger:'hover'
                popover.create('#' + number, {
                    title: number + '# 柜子详情', trigger: 'click',
                    animation: 'pop',
                    closeable: true,
                    delay: {
                        show: null,
                        hide: 100
                    },
                    cache: false,
                    placement: 'right-bottom',
                    opacity: 0.98,
                    type: 'iframe',//content type, values:'html','iframe','async'
                    url: '/host/info?number=' + number,
                    // width:'auto',
                    height: 300
                })
            }
            $(".el2").mouseover(function (e) {
                let number = $(this).find(".pear-text").text();
                number = number.replace("#", "");
                over(number)
            })

            // const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
            //入库趋势图
            function warehousingTrendChart(selectStartDate, selectEndDate) {
                $.get('/InsertFileLineChart', {
                    "selectStartDate": selectStartDate,
                    "selectEndDate": selectEndDate
                }).done(function (data) {
                    var warehousingLineChart = echarts.init(document.getElementById('warehousingLineChart'));
                    warehousingLineChart.setOption({
                        color: ['#73DEB3', '#73A0FA', '#FFB761'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'line',
                                crossStyle: {
                                    color: '#999'
                                },
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                        grid: {
                            left: '25',
                            right: '25',
                            bottom: '24',
                            top: '75',
                            containLabel: true
                        },
                        toolbox: {
                            // iconStyle: {
                            //     color: '#660000',
                            // },
                            show: true,
                            feature: {
                                mark: {
                                    show: true
                                },
                                // dataZoom: { //数据缩放视图
                                //     show: true,
                                //     title: '数据缩放'
                                // },
                                // title: {
                                //     text: '销量柱状图', //标题文本内容
                                // },
                                magicType: {
                                    type: ['line', 'bar'],
                                    title: {
                                        line: "切换为折线图",
                                        bar: "切换为柱状图",
                                    },
                                },
                                // restore: {
                                //     //配置项还原
                                //     show: true, //是否显示该工具
                                //     title: '还原'
                                // },
                                myTool1: {
                                    show: true,
                                    title: "还原",
                                    icon:
                                        "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
                                    onclick: () => {
                                        $("#startDate").val(StartDate);
                                        $("#endDate").val(endDate);
                                        warehousingTrendChart(null, null);
                                    },
                                },
                                saveAsImage: {
                                    //保存为图片
                                    show: true, //是否显示该工具
                                    title: '保存为图片', name: '入库趋势图',
                                },
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: data.data.xName,
                            nameTextStyle: {
                                color: '#FF0000',
                                fontSize: 20
                            },
                            splitLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                color: '#999',
                                fontSize: 12
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#F3F4F4'
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                        },
                        series: [{
                            name: '新增档案:',
                            type: 'line',
                            smooth: true, //平滑处理
                            data: data.data.yName
                        }]
                    });
                    warehousingPieChart(data);
                });
            }

            warehousingTrendChart(null, null);

            //近6个月入库饼图
            function warehousingPieChart(data) {
                var sexrate = echarts.init(document.getElementById('sexrate'));
                // $.get('/InsertFileLineChart').done(function (data) {
                sexrate.setOption({
                    title: {
                        text: '入库比例图',
                        left: 'center',
                        textStyle: {
                            color: '#00ffff',
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: data.data.xName,
                        textStyle: {
                            color: '#00ffff',
                        }
                    },
                    series: [
                        {
                            name: '入库饼图',
                            type: 'pie',
                            radius: '50%', //饼图大小。
                            center: ['50%', '50%'],
                            // selectedMode: 'single',
                            // labelLine: {
                            //     show: false
                            // },
                            // label: {
                            //     show: false,
                            //     position: 'center'
                            // },
                            label: {
                                color: '#00ffff',
                            },
                            data: data.data.pieChartData,
                        }
                    ]
                });
                // });
            }

            // 近6个月取档饼图
            function shiftPieChart(data) {
                var courserate = echarts.init(document.getElementById('courserate'));
                // $.get('/borrowingRecordHistogram').done(function (data) {
                courserate.setOption({
                    title: {
                        // text: '近6个月取档比例图',
                        left: 'center',
                        textStyle: {
                            color: '#00ffff',
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: data.data.xName,
                        textStyle: {
                            color: '#00ffff',
                        }
                    },
                    series: [
                        {
                            name: '取档饼图',
                            type: 'pie',
                            radius: '50%', //饼图大小。
                            center: ['50%', '45%'],
                            label: {
                                color: '#00ffff',
                            },
                            data: data.data.lendingPieChartData,
                        }
                    ]
                });
                // });
            }

            // 归还档案饼图
            function returnFilePieChart(data) {
                var professionrate = echarts.init(document.getElementById('professionrate'));
                // $.get('/borrowingRecordHistogram').done(function (data) {
                professionrate.setOption({
                    title: {
                        // text: '近6个月取档比例图',
                        left: 'center',
                        textStyle: {
                            color: '#00ffff',
                        },
                        top: 10
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: data.data.xName,
                        textStyle: {
                            color: '#00ffff',
                        }
                    },
                    series: [
                        {
                            name: '归档饼图',
                            type: 'pie',
                            radius: '50%', //饼图大小。
                            center: ['50%', '45%'],
                            label: {
                                color: '#00ffff',
                            },
                            data: data.data.returnPieChartData,
                        }
                    ]
                });
                // });
            }

            // 借阅记录柱状图
            function borrowingRecordHistogram(selectStartDate, selectEndDate) {
                $.get('/borrowingRecordHistogram', {
                    "selectStartDate": selectStartDate,
                    "selectEndDate": selectEndDate
                }).done(function (data) {
                    console.log(data.data)
                    var histogram = echarts.init(document.getElementById('borrowingRecordHistogram'));
                    histogram.setOption({
                        tooltip: {
                            trigger: 'axis',
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                magicType: {
                                    show: true, type: ['line', 'bar'], title: {
                                        line: "切换为折线图",
                                        bar: "切换为柱状图",
                                    }
                                },
                                // restore: {show: true},
                                myTool1: {
                                    show: true,
                                    title: "还原",
                                    icon:
                                        "path://M512 981.333333c-209.866667 0-396.693333-126.026667-466.293333-314.08a35.52 35.52 0 0 1 23.626666-44.426666 38.613333 38.613333 0 0 1 48 20.693333c58.666667 158.933333 217.013333 265.493333 394.666667 265.6s336-106.666667 394.666667-266.133333a37.6 37.6 0 0 1 28.853333-23.626667 38.986667 38.986667 0 0 1 35.786667 11.946667 34.773333 34.773333 0 0 1 7.146666 35.36c-69.386667 188.373333-256.48 314.666667-466.453333 314.666666z m431.36-574.08a37.92 37.92 0 0 1-35.946667-24.266666C849.386667 222.56 690.613333 114.88 512 114.72S174.72 222.346667 116.746667 382.773333A38.72 38.72 0 0 1 69.333333 403.733333a35.786667 35.786667 0 0 1-24.106666-44.373333C113.333333 169.866667 301.013333 42.666667 512 42.666667s398.666667 127.306667 467.146667 316.96a34.56 34.56 0 0 1-4.906667 32.64 38.933333 38.933333 0 0 1-30.88 14.986666z",
                                    onclick: () => {
                                        $("#borrowStartDate").val(StartDate);
                                        $("#borrowEndDate").val(endDate);
                                        borrowingRecordHistogram(null, null);
                                    },

                                },
                                saveAsImage: {show: true, title: '保存为图片', name: '借档和归档柱状图',}
                            },
                        },
                        legend: {
                            show: true,
                            // right:"35%",
                            data: ['取档', '归档'],
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        grid: {
                            top: '18%',
                            right: '5%',
                            bottom: '8%',
                            left: '5%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.data.xName,
                                splitLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#3c4452'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    lineStyle: {
                                        color: '#519cff'
                                    },
                                    alignWithLabel: true,
                                    interval: 0,
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                nameTextStyle: {
                                    color: '#fff'
                                },
                                interval: 1,
                                // max: 50,
                                // min: 0,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#23303f'
                                    }
                                },
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#115372'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: "#fff"
                                    },
                                    alignWithLabel: true,
                                    interval: 0

                                }
                            }
                        ],
                        color: ['#76da91', '#f8cb7f', '#FFB761'],
                        series: [
                            {
                                name: '取档',
                                type: 'bar',
                                data: data.data.lendingList,
                            },
                            {
                                name: '归档',
                                type: 'bar',
                                data: data.data.returnList,
                            }
                        ]
                    });
                    returnFilePieChart(data)
                    shiftPieChart(data)
                });
            }

            borrowingRecordHistogram(null, null);
        }
    )
</script>
</body>
</html>